<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jQuery UI Sortable - Connect lists</title>
    <style>
      #sortable1,
      #sortable2 {
        border: 1px solid #eee;
        width: 142px;
        min-height: 20px;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 0;
        float: left;
        margin-right: 10px;
      }
      #sortable1 li,
      #sortable2 li {
        border: 1px  solid salmon;
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
      }
    </style>
    <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
    <script src="https://unpkg.com/jquery-ui@1.14.1/dist/jquery-ui.js"></script>

    <script>
      $(function () {
        $("#sortable1>li").draggable({
          containment: "#cc",
          cursor: "default",
          cancel: "span,input",
          distance: 10,
          zIndex: 9,
          opacity: 0.5,
          cursorAt: {
            right: 20,
            top: 20,
          },
          connectToSortable: "#sortable2",
        });

        $("#cc>div").scroll(function (e) {
          // $("#sortable2").sortable("refresh"); //触发滚动时刷新位置信息
          //$( "#sortable2").sortable( "refreshPositions" );  //同上，使用其中一个即可
        });

        $("#sortable2").sortable({
          containment: "#cc",
          connectWith: "#sortable1",
          zIndex: 9,
        });
      });
    </script>
  </head>
  <body>
    <div
      id="cc"
      style="
        width: 500px;
        height: 200px;
        border: 1px solid red;
        margin-left: 50px;
        margin-top: 80px;
      "
    >
      <div
        style="width: 100%; height: 100%; overflow-y: auto; position: relative"
      >
        <ul id="sortable1" class="connectedSortable">
          <li class="ui-state-default">Item 1</li>
          <li class="ui-state-default">Item 2</li>
          <li class="ui-state-default">Item 3</li>
          <li class="ui-state-default">Item 4</li>
          <li class="ui-state-default">Item 5</li>
          <li class="ui-state-default">Item 6</li>
          <li class="ui-state-default">Item 7</li>
          <li class="ui-state-default">Item 8</li>
          <li class="ui-state-default">Item 9</li>
          <li class="ui-state-default">Item 0</li>
        </ul>

        <ul id="sortable2" class="connectedSortable">
          <li class="ui-state-highlight">Item 1</li>
          <li class="ui-state-highlight">Item 2</li>
          <li class="ui-state-highlight">Item 3</li>
        </ul>
      </div>
    </div>
  </body>
</html>
